iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 21
0
自我挑戰組

學習 canvas 日記系列 第 21

第21天 滑鼠座標

  • 分享至 

  • xImage
  •  
var mX;
var mY;

若是有要記錄滑鼠的座標位子
就要把變數放外面成為全域變數
取得滑鼠在移動或點擊時觸發事件要使用 addEventListener

cvs.addEventListener('mousedown', function(e){ ... }, false);
// 滑鼠按下時

cvs.addEventListener('mousemove', function(e){ ... }, false);
// 滑鼠移動時

cvs.addEventListener('mouseup', function(e){ ... }, false);
// 滑鼠放開時

cvs.addEventListener('click', function(e){ ... }, false);
// 滑鼠(手機)點擊時

function(e) 刮號中的 e 是為了找到當觸發事件時的屬性、值
其中也包括座標 (x, y)
以取得點擊的座標為例

cvs.addEventListener('click', function(e){
  mX = e.clientX - cvs.offsetLeft;
  mY = e.clientY - cvs.offsetTop;
})
console.log(mX, mY)

就會看到在每次畫布 cvs 被點擊時的位置
clientX、clientY 取得的值是以視窗的左上(0, 0) 為起點
向右向下找到被點擊的(x, y) 位置
因為取得的 (x, y) 會包含不是畫布的部分
所以用 offset 找到畫布 cvs 和視窗 Left | Right | Top | Bottom 的距離
offsetLeft 和 offsetTop 就是要刪除視窗和畫布之間的距離


上一篇
第 20 天 setInterval() 分多個執行
下一篇
第 22 天 Keydown事件
系列文
學習 canvas 日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言